<template>
	<view style="height: 100%;">
		<view >
			<ComponentHeader v-on:parentCourseSearch="parentCourseSearch"></ComponentHeader>
			<ComponentSwiper :swipers="swipers"></ComponentSwiper>
		</view>
		<view class="line-view" >
			<view class="line-box-view" v-for="type in courseTypes">
				<view class="line-item-lfet-view">
					<view><image :src="type.icon" style="width: 80rpx;height: 80rpx;"/></view>
					<view><text>{{type.title}}</text></view>
				</view>
				<view class="line-item-right-view" >
					<view @click="clicktype" :data-tid="t.id" v-for="(t,index) in type.children"  v-if="index < 4">{{t.title}}</view>
					<view>更多></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				courseTypes:[
					
					{
						title:"java学科",
						icon:"../../static/icon1.png",
						children:[
							{title:"java基础",id:1},
							{title:"Spring",id:2},
							{title:"SpringBoot",id:3},
							{title:"SpringMVC",id:4},
							{title:"java基础",id:5},
							
						]
					},
					{
						title:"Php学科",
						icon:"../../static/icon2.png",
						children:[
							{title:"SpringMVC",id:6},
							{title:"java基础",id:7},
							{title:"SpringBoot",id:8},
							{title:"java基础",id:9},
							{title:"java基础",id:10},
							
						]
					},
					{
						title:"H5学科",
						icon:"../../static/icon1.png",
						children:[
							{title:"H5基础",id:11},
							{title:"CSS",id:12},
							{title:"JavaScript",id:13},
							{title:"jQuery",id:14},
						]
					},
					{
						title:"UI学科",
						icon:"../../static/icon2.png",
						children:[
							{title:"UI基础",id:15},
							{title:"Photoshop",id:16},
							{title:"绘画",id:17},
							{title:"素描",id:18},
						]
					},
				]
			}
		},
		methods: {
			clicktype(e){
				let tid = e.currentTarget.dataset.tid;
				uni.reLaunch({
					url:"/pages/course/course?typeid="+tid
				})
			},
		}
	}
</script>

<style>
	.line-box-view{
		height: 140rpx;border-bottom: 2rpx solid #e6e6e6;
		padding: 20rpx;
	}
	.line-item-lfet-view{
		width: 30%;text-align: center;float: left;
		border-right: 2rpx solid #D3D3D3;
	}
	.line-item-right-view{
		width: 66%;float: right;
	}
	.line-item-right-view view{
		display: inline-block;
		margin: 10rpx;
		overflow-x: scroll;
		border: 1rpx solid #D3D3D3;
		padding: 10rpx;
		font-size: 28rpx;
		border-radius: 10rpx;
	}
</style>
